﻿.textAlignCenter { text-align: center; }
.displayNone { display: none; }
.visibilityHidden { visibility: hidden; }
.clear { clear: both; }
        
        
#ChatContainer { float: left; width: 250px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size: 11px; }
        
#ChatRoomHeader { background: #4D68A2; border: 1px solid #4D68A2; height: 26px; }
#ChatRoomHeader ul { color: #00FF00; margin: 0px; padding: 5px 0px 5px 20px; }
#ChatRoomHeader ul #MyUserName { height: 16px; color: #FFFFFF; font-weight: bold; }
        
#ChatRoomUsers { border-left: 1px solid #B2B2B2; border-right: 1px solid #B2B2B2; max-height: 200px; overflow-y: scroll; }
#ListOfUsers { margin: 0px; padding: 5px 0px 5px 25px; font-size: 1.4em; }
#ListOfUsers li { color: #00FF00; }
#ListOfUsers li span { color: #000000; }
#ListOfUsers li.disconnected { color: #FF0000; }
#ListOfUsers li.disconnected span { color: #C9D0DA; }
#ListOfUsers li.noUsersUser { list-style: none; color: #C9D0DA; }
        
#ChatRoomMessages { border: 1px solid #B2B2B2; }
#ChatArea { max-height: 300px; padding: 10px 3px; overflow-y: scroll; }
#ChatMessageWrapper { padding: 2px; border-top: 1px solid #C9D0DA; max-height: 75px; overflow-x: hidden; overflow-y: auto; }
#ChatMessage { resize: none; width: 95%; height: 18px; border: none; margin: 0px; padding: none; }
.userMessage { }
.userMessage .userName { font-weight: bold; }
.userMessage .messageData { }
        
        
#Login, #GameBoard { float: left; width: 800px; height: 600px; margin-left: 30px; border: 1px solid #000000; }
.loginOption { display:inline-block; padding: 20px; cursor:pointer; background: #C9D0DA; border-radius: 10px; border: 4px solid #C9D0DA; margin: 0px 5px; }
.loginOption .loginOptionCaption { visibility:hidden; }
.loginOption:hover { border: 4px solid #B2B2B2; }
.loginOption:hover .loginOptionCaption { visibility: visible; }
        
.loginDialogPanel { display: inline-block; margin: 0px 10px; }
#LoginDialogSubContext { margin: 30px 0px; text-align:center; }
#LoginErrorMessage { color: #FF0000; font-style: italic; }

.boardPiece { float:left; width: 20px; height:20px; padding: 0px; margin: 0px; background:#C9D0DA; }
#GameControls { overflow: auto; }
.hostControls, .hostGameInProgressControls, .hostUniversalControls { float: left; }
.hostControls input[type=text] { width: 50px; }
.hostControls div { padding: 10px; border: 1px solid #000000; display: inline-block; margin-bottom: 20px; }
.unlocked { cursor: pointer; width: 40px; height: 40px; background: url('/images/unlocked.png'); }
.locked { cursor: pointer; width: 40px; height: 40px; background: url('/images/locked.png'); }